﻿<!DOCTYPE html>
<html lang="zh-CN" ng-app="WebApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="3600">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>职业健康</title>
    <link href="~/Assets/Emergency/css/base.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/index.css" rel="stylesheet" />
    <link href="~/Assets/Styles/libs/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/banner.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/font-awesome.min.css" rel="stylesheet" />

    <style>
        .t_title {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }

        #chart_map {
            cursor: pointer;
        }

        .t_show {
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }

        #worktypelist {
            margin: 20px;
        }

            #worktypelist li {
                float: left;
                list-style: none;
                color: white;
                margin-left: 10px;
            }

            #worktypelist span {
                width: 30px;
                height: 15px;
                background-color: grey;
                display: block;
                border-radius: 5px;
                float: left;
                margin: 3px;
            }

        .table_p {
            height: 93%;
            margin-top: 7%;
            position: relative;
        }

        .table_p01 {
            height: auto !important;
            margin-top: 0 !important;
            position: relative;
        }

            .table_p01 table td {
                padding: 6px 0;
            }

        .table_p table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            position: absolute;
            text-align: center;
        }

            .table_p table thead th {
                color: #61d2f7;
                font-size: 14px;
                font-weight: 600;
                padding-top: 5px;
                padding-bottom: 5px;
            }

            .table_p table tbody {
                color: #ffffff;
                font-size: 13px;
            }

                .table_p table tbody tr:nth-child(2n+1) {
                    background-color: #072951;
                    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
                }

        .meter-info {
            width: 16%;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap;
            display: inline-block;
        }

        .meter-head {
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        .meter-footer {
            color: white;
            font-weight: bold;
            font-size: 18px;
        }

        .meter {
            width: 25px;
            height: 150px;
            display: block;
            margin: 0 auto;
        }

        .table_p {
            line-height: 30px;
            font-size: 18px;
        }

            .table_p span {
                display: block;
                float: left;
                width: 80px;
                font-weight: bold;
                text-align: right;
            }

            .table_p a {
                color: white;
            }

        .menu_btn {
            margin-top: 30px;
            cursor: pointer;
            box-sizing: border-box;
            border: 2px solid red;
            border-image: url(~/Assets/Emergency/img/border.png) 51 38 21 132;
            border-width: 1.125rem 1.583rem 0.875rem 2.5rem;
            width: 100px;
            height: 40px;
            font-size: 14px;
            font-weight: bold;
        }

            .menu_btn a {
                display: block;
                cursor: pointer;
                text-align: center;
            }

        .div-a {
            position: absolute;
        }

        .detail_div {
            background-color: rgba(0,0,0,0.5);
            color: #FFF;
            border-radius: 4px;
            z-index: 999;
            position: fixed;
            width: 300px;
        }

        .detail_text {
            display: none;
            font-size: 17px;
        }

        .menu-active {
            color: #2C58A6;
            font-weight: bold;
        }

        #triangle-topleft {
            width: 0;
            height: 0;
            border-top: 100px solid black;
            border-right: 100px solid transparent;
        }

        #triangle-topright {
            width: 0;
            height: 0;
            border-top: 100px solid black;
            border-left: 100px solid transparent;
        }

        .factory-active {
            color: white;
            font-weight: bold;
        }

            .factory-active:hover {
                color: white;
                font-weight: bold;
            }

        .main_title a:hover {
            text-decoration: none;
        }

        .alarm {
            color: red;
        }

        .carInfo {
            width: 0;
            height: 0;
            background: #061f3e;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            border-radius: 8px;
            display: none;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

        .filterbg {
            width: 100%;
            height: 100%;
            background: rgba(30,182,254,0.5);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 998;
            display: none;
        }

        .carInfo .carClose {
            display: block;
            width: 44px;
            height: 44px;
            background: url(../../Assets/DashBoard/images/s_ico3.png);
            background-size: 100% 100%;
            position: absolute;
            top: -22px;
            right: -22px;
            display: none;
            transition: 0.3s;
        }

            .carInfo .carClose:hover {
                transform: rotate(180deg);
            }
    </style>
</head>
<body style="overflow:hidden;height:100%;" ng-controller="OHSController" ng-init="model.FactoryAreaId=1">
    <div class="time_div" style="position: absolute; top: 53px; right: 30px; color: white; font-size:15px;">
        <div id="now"></div>
    </div>
    <!--header-->
    <div class="header">
        <div class="bg_header">
            <div class="header_nav fl t_title">
                职业健康数据总览
            </div>
        </div>
    </div>

    <!--main-->
    <div class="data_content">
        <div class="data_main">
            <div class="main_left fl">
                <div class="left_1 t_btn6" style="cursor: pointer;">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        体检参与率&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="chart_safekpi" class="chart" style="width:100%;height: 280px;">

                    </div>
                </div>
                <div class="left_2" style="cursor: pointer;">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <a href="DeviceList" style="color:white;">
                            体检结果&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                    <div class="chart" style="width:100%;height: 280px;">
                        <div id="chart_dangerplace" style="width:49%; height:100%;float:left;">

                        </div>
                        <div id="chart_dangerplacekpi" style="width:49%; height:100%;float:left;">

                        </div>
                    </div>
                </div>
            </div>
            <div class="main_center fl" style="height:530px;">

                <div class="center_text">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <span class="glyphicon glyphicon-globe"></span>
                        厂区地图&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="zhuashou" style="position:absolute;bottom:15px;left:40px; color:white;font-weight:bold;font-size:17px;">
                        @*<a style="color:white;" ng-click="ChangeFactory(model);">切换厂区</a>*@
                        <a ng-class="{'factory-active' :model.FactoryAreaId==1}" ng-click="ChangeFactoryByArea(model,1);">浦东</a>&nbsp;&nbsp;
                        <a ng-class="{'factory-active' :model.FactoryAreaId==2}" ng-click="ChangeFactoryByArea(model,2);">大场</a>
                    </div>
                    <img src="~/Bussiness/img/pudong.png" width="925" ng-show="model.FactoryAreaId==1" ng-cloak />
                    <img src="~/Assets/DashBoard/images/dcArea.jpg" width="925" ng-show="model.FactoryAreaId==2" ng-cloak />
                </div>
            </div>
            <div class="main_right fr">
                <div class="right_1">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        场所合格率&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="chart_epi" class="echart" style="width:100%;height: 280px;"></div>
                </div>

                <div class="right_2">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        历年检测点数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="chart_exhaust" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;"></div>
                </div>
            </div>
        </div>
        <div class="data_bottom">
            <div class="bottom_1 fl t_btn5" style="cursor: pointer;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <a style="color:white;">
                        检查类型&nbsp;&nbsp;&nbsp;&nbsp;
                    </a>
                </div>
                <div id="dangerwork" class="echart fl" style="width:100%;height: 280px;margin-top: 15px;">

                    <div class="table_p lb-box" id="worklist" style="margin-top:50px;padding-top:1px;">

                    </div>
                </div>
            </div>
            <div class="bottom_center fl">
                <div class="bottom_2 fl">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <a href="ImportantDeviceList" style="color:white;">
                            接害分类人数&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                    <div id="chart_device" class="echart fl" style="width:100%;height: 280px;margin-top: 15px; float:left;"></div>
                </div>
            </div>
            <div class="bottom_center fl" style="margin-left:22px;">
                <div class="bottom_2 fl">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        @*<span class="glyphicon glyphicon-leaf"></span>*@
                        设备清单&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="chart_dangerwaste" class="echart fl" style="width:100%;height: 280px;margin-top: 15px; float:left;"></div>
                </div>
            </div>
            <div class="bottom_4 fr">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    车间人数占比&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
                <div class="echart fl" style="width:100%;height: 280px;margin-top: 15px;">
                    <div id="slider" class="lb-box" style="padding-left:50px;">

                    </div>
                </div>
            </div>
        </div>
    </div>

</body>


<script src="~/Bussiness/js/base/angular.js"></script>
<script type="text/javascript" src="~/Bussiness/js/base/jquery.min.js"></script>
<script src="~/Bussiness/js/base/jquery.cookie.js"></script>
<script src="~/Bussiness/js/base/angular-cookie.js"></script>
<script src="~/Bussiness/js/base/bootstrap.min.js"></script>
<script src="~/Bussiness/js/libs/ng-file-upload-shim.min.js"></script>
<script src="~/Bussiness/js/libs/ng-file-upload.min.js"></script>
<script src="~/Bussiness/js/base/echart.min.js"></script>
<script src="~/Bussiness/js/libs/fileinput.js"></script>
<script src="~/Bussiness/js/pg/app.js"></script>
<script src="~/Bussiness/js/pg/OHS.js"></script>
</html>